<script setup lang="ts">

defineProps<{
  data: {
    bl: number,
    br: number,
    fl: number,
    fr: number
  }
}>()

</script>

<template>
  <div class="suspension">
    <div class="line">
      <div class="bar" :style="'transform:scaleY(' + (-data.bl / 20) + ')'"></div>{{ data.bl.toFixed(1) }}
      <div class="bar" :style="'transform:scaleY(' + (-data.br / 20) + ')'"></div>{{ data.br.toFixed(1) }}
    </div>
    <div class="line">
      <div class="bar" :style="'transform:scaleY(' + (-data.fl / 20) + ')'"></div>{{ data.fl.toFixed(1) }}
      <div class="bar" :style="'transform:scaleY(' + (-data.fr / 20) + ')'"></div>{{ data.fr.toFixed(1) }}
    </div>
  </div>
</template>

<style scoped lang="less">
.suspension {
  width: 80vh;
  height: 50vh;
  position: absolute;
  bottom: 5rem;
  right: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #0F0;
  font-family: lcd;
  font-size: 4rem;
  .line {
    height: 19vh;
    width: 80vh;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    border-bottom: 1px solid #111;
    .bar {
      width: 0.5rem;
      height: 20px;
      background-color: #666;
      transform-origin: 50% 100%;
      display: flex;
      align-items: flex-end;
    }
  }
}
</style>
